<!DOCTYPE html>
<html>
  <head>

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.0.7/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/google/code-prettify/master/src/prettify.css">
    <link rel="stylesheet" type="text/css" href="../examples.css">

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.0.7/semantic.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

    <script src="../sm-core.js"></script>
    <script src="../sm-addons.js"></script>
    <script src="sm-transition.js"></script>

    <script>
      angular.module('semantic-ui')
        .controller('MainController', function($scope) 
        {
        })
      ;
    </script>
    <style>
        .main.ui.container {
          position: relative;
          width: 800px !important;
          left: 0px;
          margin-left: auto !important;
          margin-right: auto !important;
        }
    </style>

  </head>
  <body ng-app="semantic-ui" ng-controller="MainController">

    <div class="main ui container">

      <div class="ui right rail">
        <sm-sticky context=".main.ui.container">
          <img src="http://semantic-ui.com/images/leaves/1.png" class="ui autumn leaf image">
        </sm-sticky>
      </div>

      <code class="float right optional">optional</code>
      <code class="float right required">required</code> 

      <h1 class="ui header">
        <img src="http://semantic-ui.com/images/logo.png">
        <div class="content">
          Transition Directives
          <div class="sub header">Create &amp; Control Semantic UI Transition with Angular Directives</div>
        </div>
      </h1>

      <div class="ui secondary top attached segment">
        <h3 class="ui header">
          sm-transition
          <div class="sub header">Executes a transition when an event occurs on the element.</div>
        </h3>
      </div>
      <div class="ui bottom attached segment">

        <h5>Attributes</h5>
        <ul>
          <li><code class="required">sm-transition</code> <code>@</code> a string of the transition to play.</li>
          <li><code class="optional">sm-transition-events</code> <code>@</code> a string of the events that trigger the transition.</li>
          <li><code class="optional">sm-transition-other</code> <code>@</code> a selector string of the elements to transition when the event occurs.</li>
        </ul>

        <h5>Example</h5>

        <pre class="ui segment prettyprint lang-html" id="code0"></pre>

        <div data-copy-to="#code0"> 
          <sm-button sm-transition="scale" sm-transition-other=".autumn.leaf">Scale</sm-button>
        </div>

      </div>

    </div>

    <script src="../examples.js"></script>

  </body>
</html>